import React from "react";
import Header from "./include/header";
import Bottom from "./include/bottom";

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            name: "洪老师",
            age: 34,
            sex: "男",
            num: 10,
            students: ["张三","李四","王五","赵六"],
            fruit: {
                name: "苹果",
                color: "红色",
                weight: 0.3
            },
            computers:[
                {
                    name: "联想",
                    color: "黑色",
                    weight: 10,
                    size: 16
                },
                {
                    name: "华硕",
                    color: "红色",
                    weight: 12,
                    size: 18
                },
                {
                    name: "戴尔",
                    color: "白色",
                    weight: 8,
                    size: 14
                }
            ],
            showBottom: true  //控制Bottom组件是否显示
        }

    }

    render() {
        return (
            <div className={"mainApp"}>
                <Header num={this.state.num} xxx={"yyy"} />
                <div className={"middle"}>
                    你好，我的名字叫：{this.state.name}，{this.state.age}岁，性别是{this.state.sex}&nbsp;&nbsp;
                    我的名字的字符长度是：{"洪老师".length}&nbsp;&nbsp;
                    我的名字的第二个字是：{"洪老师".charAt(1)}&nbsp;&nbsp;
                    现在时间：{60 * 60}
                    <button onClick={
                        event => {
                            this.setState({
                                name: "Teacher hong"
                            })
                        }
                    }>修改名字</button>
                    <br/>
                    {/*  这是引用public下面的图片的方式
                        <img src="/1.gif"/>*/}
                    <img src={require("../asset/1.gif")} height={100} alt={""}/><br/>
                    <button onClick={
                        event => {
                            this.setState({
                                num: this.state.num-1,
                                age: this.state.age+1
                            })
                        }
                    }>-</button>
                    &nbsp;&nbsp;<span>{this.state.num}</span>&nbsp;&nbsp;
                    <button onClick={
                        event => {
                            this.setState({
                                num: this.state.num+1,
                                age: this.state.age+1
                            })
                        }
                    }>+</button>
                    &nbsp;&nbsp;
                    num是{this.state.num % 2 === 0 ? "偶数" : "奇数"}<br/>
                    {this.state.students.join(" * ")}<br/>
                    <button onClick={
                        event => {
                            let students = this.state.students;
                            students.push("Jack");
                            console.log(students);
                            this.setState({
                                students
                            })
                        }
                    }>增加一个学生</button>
                    <button onClick={
                        event => {
                            let students = this.state.students;
                            let index = students.indexOf("王五");
                            console.log(index);
                            if (index > -1) {
                                students.splice(index,1);
                                console.log(students);
                                this.setState({students});
                            } else {
                                alert("未找到需要删除的项");
                            }
                        }
                    }>删除一个学生</button><br/>
                    {this.state.fruit.name} 颜色是：{this.state.fruit.color} 重量是：{this.state.fruit.weight} kg<br/>
                    <button onClick={
                        event => {
                            let fruit = this.state.fruit;
                            fruit.color = "黄色";
                            fruit.weight = 0.5;
                            console.log(fruit);
                            this.setState({fruit})
                        }
                    }>修改水果颜色和重量</button><br/>
                    <table className={"computerTable"} border={1} width={400}>
                        <tbody>
                            <tr>
                                <th>名称</th>
                                <th>颜色</th>
                                <th>重量</th>
                                <th>尺寸</th>
                                <th>操作</th>
                            </tr>
                            {this.state.computers.map((computer, index) =>
                                <tr key={index}>
                                    <td>{computer.name}</td>
                                    <td>{computer.color}</td>
                                    <td>{computer.weight}</td>
                                    <td>{computer.size}</td>
                                    <td>
                                        <button onClick={
                                            event => {
                                                let computers = this.state.computers;
                                                computers.splice(index, 1);
                                                this.setState({computers});
                                            }
                                        }>删除</button>
                                    </td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                    <button onClick={
                        event => {
                            let computers = this.state.computers;
                            computers.push(
                                {
                                    name: "三星",
                                    color: "绿色",
                                    weight: 9,
                                    size: 15
                                }
                            )
                            console.log(computers);
                            this.setState({computers})
                        }
                    }>增加一个电脑</button>
                </div>
                <button onClick={
                    event => {
                        this.setState({
                            showBottom: !this.state.showBottom
                        })
                    }
                }>移除/挂载Bottom</button>
                {this.state.showBottom ?
                <Bottom num={this.state.num} fruit={this.state.fruit} students={this.state.students} name={this.state.name} />
                : null}
            </div>
        )
    }

}

export default App;

